<template>
    <div>
        <div class="box">
            <div style="margin-bottom: 20px;">
                <input v-model="hqdd.query" class="sousuo" type="text" name="" id="">
                <span  @click="sousuo" class="el-icon-search"></span>
            </div>
            <el-table :data="dd.goods" style="width: 80vw" height="80%" :stripe="true" border>
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="order_number" label="订单编号" width="300"></el-table-column>
                <el-table-column prop="order_price" label="订单价格"  width="120"></el-table-column>
                <el-table-column label="是否付款" width="120">
                    <template slot-scope="scope">
                        <span class="fk" :style="scope.row.pay_status==1?'background-color:#F0F9EB; color:#76C65D;':'background-color:#FEF0F0;color:#F66C83;'">{{ scope.row.pay_status==0?"未付款":"已付款" }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货" width="120"></el-table-column>
                <el-table-column prop="time" label="下单时间"></el-table-column>
                <el-table-column  prop="address" label="操作">
                    <template slot-scope="scope">
                        <!-- 修改信息 -->
                        <span @click="xgzt(scope.row)" style="background-color: #409EFF;" class="el-icon-edit"></span>
                        <!-- 地址信息 -->
                        <span @click="xgdz(scope.row)" style="background-color: #67C23A;" class="el-icon-location-outline">
                            
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dd.total"
                :current-page="1"
                :page-sizes="[8]"
                :page-size="6">
            </el-pagination>

            <!-- 编辑订单 -->
            <el-dialog  title="编辑订单" :visible.sync="dialogFormVisible1">
            <el-form :model="ddxx">
                        <el-form-item label="订单编号" :label-width="formLabelWidth">
                            <el-input v-model="ddxx.bh" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="订单价格" :label-width="formLabelWidth">
                            <el-input v-model="ddxx.order_price" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="发货状态" :label-width="formLabelWidth"  >
                        <el-select v-model="ddxx.is_send">
                            <el-option label="未发货" value="0"></el-option>
                            <el-option label="已发货" value="1"></el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="支付状态" :label-width="formLabelWidth"  >
                        <el-select v-model="ddxx.pay_status">
                            <el-option label="未付款" value="0"></el-option>
                            <el-option label="已付款" value="1"></el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="支付方式" :label-width="formLabelWidth"  >
                        <el-select v-model="ddxx.order_pay">
                            <el-option label="未支付" value="0"></el-option>
                            <el-option label="支付宝" value="1"></el-option>
                            <el-option label="微信" value="2"></el-option>
                            <el-option label="银行卡" value="3"></el-option>
                        </el-select>
                        </el-form-item>
            </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="bjcg">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 物流信息 -->
            <el-dialog  title="物流信息" :visible.sync="dialogFormVisible2">
                <p v-for="x,i in wlxx" :key="i">{{ x.time }} <br> {{ x.context }}</p>            
            </el-dialog>
            
        </div>
    </div>
</template>

<script>
import {ddhqrequest,xgrequest,wlxxrequest} from '../../../request/api/orders/ddlb'
export default {
    data(){
        return{
            dd:[],
            hqdd:{
                query:'',
                pagenum:1,
                pagesize:8,  
            },
            ddxx:{
                id:'',
                is_send:'',
                order_pay:'',
                order_price:'',
                order_number:'',
                pay_status:'',
                bh:''
            },
            formLabelWidth:'120px',
            dialogFormVisible1:false,
            dialogFormVisible2:false,
            wlxx:[]
        }
    },
    methods:{
        fb(){
            ddhqrequest(this.hqdd).then(res=>{
                this.dd=res.data.data
                this.dd.goods.map(item=>{
                    let date=new Date(item.create_time*1000)
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                    let time= Y + M + D + h + m + s;
                    item.time=time
                })
                console.log(this.hqdd)
            })
        },
        handleCurrentChange(val) {
            // 改变默认的页数
            this.hqdd.pagenum=val
            this.fb(this.splb)
        },
        // 编辑弹窗
        xgzt(x){
            this.ddxx=x
            this.ddxx.bh=x.order_number
            this.ddxx.order_number=''
            this.dialogFormVisible1=true
        },
        // 确定修改
        bjcg(){
            console.log(this.ddxx);
            xgrequest(this.ddxx).then(res=>{
                if(res.data.meta.status==201){
                    this.fb()
                    this.dialogFormVisible1=false
                }
                
            })
        },
        // 物流信息窗口
        xgdz(x){
            this.dialogFormVisible2=true
            wlxxrequest(x.order_id).then(res=>{
                this.wlxx=res.data.data
                console.log(this.wlxx);
            })
        },
        sousuo(){
            ddhqrequest(this.hqdd).then(res=>{
                this.dd=res.data.data
                this.dd.goods.map(item=>{
                    let date=new Date(item.create_time*1000)
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                    let time= Y + M + D + h + m + s;
                    item.time=time
                })
                console.log(this.dd);
            })
        }
    },
    created(){
        this.fb()
    }
}
</script>

<style scoped>
    .box{
        width: 80vw;
        height: 78vh;
        background-color: white;
        padding: 20px;
    }
    .sousuo{
        width: 360px;
        height: 40px;
        border: 1px solid #c0c0c0;
        box-sizing: border-box;
        vertical-align: top;
    }
  .el-icon-search{
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid #c0c0c0;
        height: 40px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #F5F7FA;
        margin-left: -2px;
        font-size: 20px;
        vertical-align: top;
        cursor: pointer;
    }
    .el-icon-edit,.el-icon-location-outline{
        display: inline-block;
        width: 40px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        margin-left: 10px;
        cursor: pointer;
        color: white;
    }
    .fk{
        display: inline-block;
        width: 56px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
</style>